import React, { Component } from 'react';
import {
  View,
  Text,
  Platform,
  StyleSheet,
} from 'react-native';

import DatePicker from 'react-native-datepicker';

import PxToDp from '../../utils/PxToDp';
import NavCon from '../Public/NavCon';
import fetchPerfence from '../../actions/PerfenceAction';
import Loading from '../Public/Loading';

const perfenceIsLoading = true;
let today = '';

export default class OnLineTime extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
      week: '',
      month: '',
    };
  }

  getNowFormatDate() {
    const date = new Date();
    const seperator1 = '-';
    let month = date.getMonth() + 1;
    let strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = `0${month}`;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = `0${strDate}`;
    }
    today = date.getFullYear() + seperator1 + month + seperator1 + strDate;
  }

  _onDateChange(date) {
    const { dispatch } = this.props;
    let week = today;
    let month = today;
    if (this.state.week) {
      week = this.state.week;
    }
    if (this.state.month) {
      month = this.state.month;
    }
    this.setState({ date }, () => {
      dispatch(fetchPerfence(perfenceIsLoading, 0, this.state.date, week, month, 2));
    });
  }

  _onWeekChange(week) {
    let days = today;
    let month = today;
    if (this.state.date) {
      days = this.state.date;
    }
    if (this.state.month) {
      month = this.state.month;
    }
    const { dispatch } = this.props;
    this.setState({ week }, () => {
      dispatch(fetchPerfence(perfenceIsLoading, 0, days, this.state.week, month, 2));
    });
  }

  _onMonthChange(month) {
    let days = today;
    let week = today;
    if (this.state.date) {
      days = this.state.date;
    }
    if (this.state.week) {
      week = this.state.week;
    }
    const { dispatch } = this.props;
    this.setState({ month }, () => {
      dispatch(fetchPerfence(perfenceIsLoading, 0, days, week, this.state.month, 2));
    });
  }

  componentDidMount() {
    this.getNowFormatDate();
    const { dispatch } = this.props;
    dispatch(fetchPerfence(perfenceIsLoading, 0, today, today, today, 2));
  }

  render() {
    const perfenceData = this.props.perfenceData;
    let dayOnline = '0分';
    let weekOnline = '0分';
    let monthOnline = '0分';
    if (perfenceData) {
      dayOnline = perfenceData.day_online;
      weekOnline = perfenceData.week_online;
      monthOnline = perfenceData.month_online;
    }
    return (
      <View style={[styles.flex, styles.bgColor, styles.titleTop]}>
        <NavCon backName="" currentTitle="在线时间" onPress={() => this.props.navigator.pop()} />
        {
          this.props.perfenceIsLoading
          ?
            <Loading />
          :

            <View style={[styles.flex, styles.main]}>
              <View style={[styles.row, styles.list]}>
                <View>
                  <DatePicker
                    style={{ width: PxToDp(95) }}
                    date={this.state.date}
                    mode="date"
                    format="YYYY-MM-DD"
                    confirmBtnText="确认"
                    cancelBtnText="取消"
                    customStyles={{
                      dateIcon: {
                        position: 'absolute',
                        left: PxToDp(0),
                        top: PxToDp(0),
                        width: PxToDp(0),
                        height: PxToDp(0),
                      },
                      dateText: {
                        marginLeft: PxToDp(0),
                        color: '#666',
                        fontSize: PxToDp(14),
                      },
                      dateInput: {
                        borderRadius: PxToDp(2),
                        height: PxToDp(14),
                        width: PxToDp(70),
                        borderWidth: 0,
                      },
                    }}
                    onDateChange={date => this._onDateChange(date)}
                  />
                  <Text style={[styles.onlineTime]}>日在线时间统计</Text>
                </View>
                <View style={styles.durationWrapper}>
                  <View style={styles.time}>
                    <Text style={[styles.duration]}>{dayOnline}</Text>
                  </View>
                </View>
              </View>
              <View style={[styles.row, styles.list]}>
                <View>
                  <DatePicker
                    style={{ width: PxToDp(95) }}
                    date={this.state.week}
                    mode="date"
                    format="YYYY-MM-DD"
                    confirmBtnText="确认"
                    cancelBtnText="取消"
                    customStyles={{
                      dateIcon: {
                        position: 'absolute',
                        left: PxToDp(0),
                        top: PxToDp(0),
                        width: PxToDp(0),
                        height: PxToDp(0),
                      },
                      dateText: {
                        marginLeft: PxToDp(0),
                        color: '#666',
                        fontSize: PxToDp(14),
                      },
                      dateInput: {
                        borderRadius: PxToDp(2),
                        height: PxToDp(14),
                        width: PxToDp(70),
                        borderWidth: 0,
                      },
                    }}
                    onDateChange={week => this._onWeekChange(week)}
                  />
                  <Text style={[styles.onlineTime]}>周在线时间统计</Text>
                </View>
                <View style={[styles.durationWrapper, { borderColor: '#f8117a' }]}>
                  <View style={styles.time}>
                    <Text style={[styles.duration]}>{weekOnline}</Text>
                  </View>
                </View>
              </View>
              <View style={[styles.row, styles.list]}>
                <View>
                  <DatePicker
                    style={{ width: PxToDp(95) }}
                    date={this.state.month}
                    mode="date"
                    format="YYYY-MM-DD"
                    confirmBtnText="确认"
                    cancelBtnText="取消"
                    customStyles={{
                      dateIcon: {
                        position: 'absolute',
                        left: PxToDp(0),
                        top: PxToDp(0),
                        width: PxToDp(0),
                        height: PxToDp(0),
                      },
                      dateText: {
                        marginLeft: PxToDp(0),
                        color: '#666',
                        fontSize: PxToDp(14),
                      },
                      dateInput: {
                        borderRadius: PxToDp(2),
                        height: PxToDp(14),
                        width: PxToDp(70),
                        borderWidth: 0,
                      },
                    }}
                    onDateChange={month => this._onMonthChange(month)}
                  />
                  <Text style={[styles.onlineTime]}>月在线时间统计</Text>
                </View>
                <View style={[styles.durationWrapper, { borderColor: '#7dd4e8' }]}>
                  <View style={styles.time}>
                    <Text style={[styles.duration]}>{monthOnline}</Text>
                  </View>
                </View>
              </View>
            </View>
        }
      </View>
    );
  }
}
const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bgColor: {
    backgroundColor: '#fff',
  },
  main: {
    paddingTop: PxToDp(24),
    paddingRight: PxToDp(10),
    paddingLeft: PxToDp(10),
    backgroundColor: '#f7f8fa',
  },
  list: {
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
    height: PxToDp(90),
    marginBottom: PxToDp(10),
    paddingLeft: PxToDp(18),
    paddingRight: PxToDp(18),
    backgroundColor: '#fff',
  },
  onlineTime: {
    color: '#666',
    fontSize: PxToDp(16),
  },
  durationWrapper: {
    paddingLeft: PxToDp(16),
    borderColor: '#a1c477',
    borderLeftWidth: PxToDp(1),
  },
  duration: {
    color: '#333',
    fontSize: PxToDp(20),
  },
  time: {
    width: PxToDp(64),
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
});
